import {connect} from 'react-redux'
import React, {Component} from 'react'
import { Link } from "react-router-dom";
import {changeUserInfo} from "../redux/actions/userAction"
import { Button, List ,Toast,DatePicker,Picker} from 'antd-mobile';
const Item = List.Item;
const Brief = Item.Brief;

import {formatDateYMD} from "../utils/datetime"

import Header from "../components/header";
import FooterMenu from "../components/footerMenu";

import {userInfoAPI} from "../utils/url"

const nowTimeStamp = Date.now();
let minDate = new Date(nowTimeStamp - 700*365*24*360000);

// console.log(nowTimeStamp,minDate);

export  class MyInfo extends Component {
  constructor (props){
   super(props)
   const {user} = props;   
   this.state= {
    uploadedFileCloudinaryUrl: '',
    date:"",
    visible: false,
    visiblesex:false,
    sex: ""
   }
   
}

    componentWillMount(){
        
    }
baseInfo(){
    return {
        selfhelp:[
            {
                title: '手机号码',
                link: '/phone',
                dec: "1899999999",
                isred: false
            }
        ]
    }

}
save(){
    let name = this.refs.name.value;
    let email = this.refs.email.value;
    const {dispatch,user,history} = this.props
    let birth = this.state.date? formatDateYMD(this.state.date) : user.get("info").userBirthday
    let sex = this.state.sex || user.get("info").userGender
    let sexNum = sex == "男" ? 1 : 0
    if(!name){
        return Toast.info('请输入昵称');
    }else if(!sex){
        return Toast.info('请选择性别');
    }else if(!birth){
        return Toast.info('请选择生日');
    }else if(!email.match(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/)){
        return Toast.info('请输入正确的邮箱地址');
    }
   dispatch(changeUserInfo(email,birth,sexNum,name,(data)=>{
        Toast.info(data.msg)
        history.go("/my")
   }))
}

   render() {
    const {user} = this.props;  // 考虑到用户刷新页面 如果写在组件加载的时候 获取不到user中的数据 
      return <div className="mymoney">
          <Header title="个人资料" {...this.props}></Header>
             <div className="container">
                <List className="my-info-change">

                <div className="list-item">
                    <div className="item-title">昵称</div>
                    <div className="item-input"><input type="text" ref="name" placeholder={ user.get("info").userNickName ?  user.get("info").userNickName : "修改昵称"}
                      className="dec red"/></div>
                </div>
                <Picker
          data={[[{label:"男",value:"男"},{label:"女",value:"女"}]]}
          title="选择性别"
          visible={this.state.visiblesex}
          cascade={false}
          cols={1}
          extra="请选择(可选)"
          value={this.state.sex}
          // onChange={v => this.setState({bank: v})}
          onOk={v =>this.setState({sex: v,visiblesex: false})}
          onDismiss={() => this.setState({ visiblesex: false })}
        >
        </Picker>
                <div className="list-item">
                    <div className="item-title">性别</div>
                    <div className="item-input">
                    <div className="dec red" type="text" onChange={() => this.setState({ visiblesex: true })} 
                    onClick={() => this.setState({ visiblesex: true })} 
                    > {this.state.sex? this.state.sex : user.get("info").userGender == 0 ?  "女": "男"}</div></div>
                </div>
                    {/* <input type="text" ref="sex" placeholder={user.get("info").userGender == 1 ?  "女": "男"} 
                     className= "dec"/>{this.state.sex}</div>
                </div> */}
                <DatePicker
                mode="date"
                title="选择生日"
                minDate={minDate}
                visible={this.state.visible}
                value={this.state.date}
                onOk={date => this.setState({ date: date, visible: false })}
                onDismiss={() => this.setState({ visible: false })}
                >
                </DatePicker>
                <div className="list-item">
                    <div className="item-title">生日</div>
                    <div className="item-input" ><div className="dec red" type="text" onChange={() => this.setState({ visible: true })} 
                    onClick={() => this.setState({ visible: true })} 
                    > {this.state.date? formatDateYMD(this.state.date) : user.get("info").userBirthday ? user.get("info").userBirthday : "修改生日"}</div></div>
                </div>

                </List>

                <List className="my-info-change myself-help">
                <div className="list-item">
                    <div className="item-title">手机号码</div>
                    <div className="item-input"><input type="text" ref="phone" disabled="disabled" placeholder={user.get("info").userMobile && user.get("info").userMobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")} 
                     className="dec"/></div>
                </div>
                <div className="list-item">
                    <div className="item-title">邮箱</div>
                    <div className="item-input"><input type="email" ref="email" placeholder={user.get("info").userMail ? user.get("info").userMail : "绑定邮箱"} 
                     className="dec red"/></div>
                </div>
                {/* {this.baseInfo().selfhelp.map((itemself,index)=>{
                    return  <Item key={index}
                           
                            arrow="horizontal"
                            onClick={() => {this.props.history.push("/my/change/user"+itemself.link)}}
                            ><div className="title">{itemself.title}</div> <div className={itemself.isred? "dec red" : "dec"}>{itemself.dec}</div></Item>
                })}
                    */}
                </List>

             </div>



             <Button type="primary" onClick={() => this.save()} >保存</Button>

      </div>
   } 
}




function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.toDoApp
  }
}

export default connect(mapStateToProps)(MyInfo)